<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>
<template>
  <view class="w-[100vw] h-[100vh] box-border contentBox">
    <wd-form ref="form" :model="model">
      <wd-cell-group custom-class="group" border>
        <wd-input
          label="宿舍名称"
          :rules="[{ required: true, message: '请输入宿舍名称' }]"
          placeholder="请输入宿舍名称"
          label-width="100px"
          prop="roomNo"
          clearable
          v-model="model.roomNo"
        />
        <wd-select-picker
          label="类型"
          v-model="model.roomType"
          :columns="typeList"
          label-width="100px"
          placeholder="请选择类型"
          :rules="[{ required: true, message: '请选择类型' }]"
          prop="roomType"
          type="radio"
          clearable
        ></wd-select-picker>
        <wd-select-picker
          label="设施"
          v-model="model.facilityIdList"
          :columns="facilitiesList"
          label-width="100px"
          prop="facilityNo"
          placeholder="请选择设施"
          clearable
          filterable
        ></wd-select-picker>
        <view class="flexBox">
          <view class="w-[100px] mr-[15px]">宿舍图片</view>
          <wd-upload
            v-model:file-list="model.fileList"
            :size-type="['compressed']"
            reupload
            :limit="1"
            :action="action"
          ></wd-upload>
        </view>
      </wd-cell-group>
    </wd-form>
    <view class="bottomBox">
      <wd-button plain @click="goBack">取消</wd-button>
      <wd-button @click="sureSubmit">确认</wd-button>
    </view>
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
  </view>
</template>

<script setup lang="js">
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import { addDormitory, editDormitory } from '@/api/administration/hostelInfo.js'
import { useAdministrationStore } from '@/store'
import { getFacilitiesList } from '@/api/administration/facilities.js'
import { nextTick } from 'vue'

defineOptions({
  name: 'AddHostel',
})

const administrationStore = useAdministrationStore()
const model = ref({})
const scrollTop = ref(0)
const action = ref(import.meta.env.VITE_UPLOAD_BASEURL)
const facilitiesList = ref([])
const form = ref(null)
const userList = ref([])
const typeList = ref([
  {
    label: '固定宿舍',
    value: '固定宿舍',
  },
  {
    label: '流动宿舍',
    value: '流动宿舍',
  },
])

const submit = () => {}

onLoad(() => {
  nextTick(async () => {
    await getFacilities()
    model.value = administrationStore.dormitoryInfo
    console.log(model.value, 556)

    uni.setNavigationBarTitle({
      title: model.value.id ? '修改宿舍' : '添加宿舍',
    })
  })
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

const goBack = () => {
  uni.navigateBack()
}

// 获取设施列表
const getFacilities = async () => {
  const res = await getFacilitiesList()
  facilitiesList.value = res.data.rows.map((item) => {
    return { label: item.facilityNo, value: item.id }
  })
}

// 点击确认
const sureSubmit = () => {
  form.value.validate().then(async (data) => {
    if (data.valid) {
      const obj = { ...model.value }
      if (obj.fileList && obj.fileList.length > 0) {
        obj.roomPic = obj.fileList[0].response
        delete obj.fileList
      }
      let res
      if (!model.value.id) {
        res = await addDormitory({ ...obj })
        if (res.data.code == 200) {
          uni.showToast({
            title: '添加成功',
            icon: 'none',
          })
          uni.navigateBack()
        }
      } else {
        res = await editDormitory({ ...obj })
        if (res.data.code == 200) {
          uni.showToast({
            title: '修改成功',
            icon: 'none',
          })
          uni.navigateBack()
        }
      }
    }
  })
}

// 初始化
</script>

<style lang="scss" scoped>
.flexBox {
  display: flex;
  padding: 10px;
  padding-left: 14px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.85);
}
.contentBox {
  background-color: #f1f1f1;
  padding: 30upx;
  .bottomBox {
    height: 180upx;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30px;
    box-sizing: border-box;
  }
}
</style>
